<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/echarts.min.js"></script>
  <script src="js/vue.js"></script>   <!--引入vue.js文件-->
  <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
  <script src="js/axios-0.18.0.js"></script>
  <style>
    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both
    }
    .top{
      margin-bottom: 30px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="top">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card shadow="always">
          用户总数 ：{{TheUser.len}}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          吧群总数 ：{{AllBars.length}}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          男女比例 ：{{TheUser.male}}:{{TheUser.female}}
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          评论数 ： {{AllDis}}
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div style="display: flex">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="gender" style="width: 600px;height:400px;align-items: center"></div>

    <div id="type" style="width: 600px;height:400px;"></div>
  </div>
  <div>
    <div id="cron" style="width: 100%;height:400px;align-items: center"></div>
  </div>

</div>



<script>
  new Vue({
    el:'#app',
    mounted(){
      this.getAllUsers();
    },
    data:{
      currentDate: new Date(),
      AllUsers:[],
      AllBars:[],
      AllPosts:[],
      AllDis:[],
      TheUser: {
        male: 0,
        female: 0,
        len: 0
      },
      TheBars:[{value:0},{value:0},{value:0},{value:0},{value:0},{value:0},{value:0}],
      ThePost:[{value:0},{value:0},{value:0},{value:0},{value:0},{value:0},{value:0}],
    },
    methods:{
      Top1(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('gender'));

        // 指定图表的配置项和数据
        var option = {
          title:{
            text: '男女比例',
          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: this.TheUser.male,
                  name: '男'
                },
                {
                  value: this.TheUser.female,
                  name: '女'
                }
              ],
              roseType: 'area'
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      Top2(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('type'));

        // 指定图表的配置项和数据
        var option = {
          title:{
            text: '论坛比例',

          },
          series: [
            {
              type: 'pie',
              data: [
                {
                  value: this.TheBars[0].value,
                  name: '软件应用区'
                },
                {
                  value: this.TheBars[1].value,
                  name: '游戏电竞区'
                },
                {
                  value: this.TheBars[2].value,
                  name: '生活日常区'
                },
                {
                  value: this.TheBars[3].value,
                  name: '旅游晒图区'
                },
                {
                  value: this.TheBars[4].value,
                  name: '动漫漫画区'
                },
                {
                  value: this.TheBars[5].value,
                  name: '影视推荐区'
                },
                {
                  value: this.TheBars[6].value,
                  name: '文学艺术区'
                }
              ],
              roseType: 'area'
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },

      getAllUsers(){
        axios.get("users/getAllUsers").then(x=>{
          this.AllUsers = x.data;
          this.AllUsers.forEach(x=>{
            if (x.gender == 'female'){
              this.TheUser.female = this.TheUser.female +1;
            }else{
              this.TheUser.male = this.TheUser.male + 1;
            }
            this.TheUser.len = this.AllUsers.length;
          })
          this.getAllPosts();
        })
      },
      getAllPosts(){
        axios.get("posts/getAll").then(x=>{
          this.AllPosts = x.data;
          this.AllPosts.forEach(x=>{
            let tid = x.tid -1;
            if (this.ThePost[tid]) {
              this.ThePost[tid].value ++;
            } else {

            }
          })
          this.getAllBars();
        })
      },
      getAllBars(){
        axios.get("bars/getAllBars").then(x=>{
          this.AllBars = x.data;
          this.AllBars.forEach(x=>{
            let tid = x.tid -1;
            if (this.TheBars[tid]) {
              this.TheBars[tid].value ++;
            } else {

            }
          })
          this.getAllDis();
        })
      },
      getAllDis(){
        axios.get("posts/getAllDis").then(x=>{
          this.AllDis = x.data;
          this.Top1();
          this.Top2();
          this.Top3();
        })
      },
      Top3(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('cron'));

        option = {
          xAxis: {
            type: 'category',
            data: ['软件应用区', '游戏电竞区', '生活日常区','旅游晒图区','动漫漫画区','影视推荐区','文学艺术区']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [this.ThePost[0].value, this.ThePost[1].value, this.ThePost[2].value,
                this.ThePost[3].value, this.ThePost[4].value, this.ThePost[5].value, this.ThePost[6].value, ],
              type: 'line'
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }



    },

  })
</script>
</body>
</html>